<template>
	<upper />

	<swiper
		class="swiper bannerTitles relative"
		autoplay
		style="height: 400rpx; width: 100%">
		<swiper-item
			v-for="(item, index) in swiperList"
			:key="item.id"
			class="inherit relative"
			@click="handleSwiper(index)">
			<image mode="aspectFill" class="inherit" :src="baseUrl + item.image" />
			<view class="bannerTitles-title absolute omit">{{ item.title }}</view>
			<view class="bannerTitles-ds absolute">{{ item.fu_title }}</view>
			<view class="bannerTitles-more flex-center">
				了解更多
				<image mode="aspectFill" src="https://aph.junhecms.com/image/icon-right.png" />
			</view>
		</swiper-item>
	</swiper>

	<view class="notice flex align-items_center">
		<u-notice-bar
			:text="noticeText"
			bgColor="#D93954"
			color="#fff"
			direction="column"
			@click="handleNotice"></u-notice-bar>
		<image
			class="notice-right"
			src="https://aph.junhecms.com/image/megaphone-right.png" />
	</view>

	<view class="menu flex wrap align-items_center justify-content_center">
		<view class="menu-item flex align-items_center" @click="jump('product')">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/main0.png" />
			<view>数字产品与解决方案</view>
		</view>
		<view class="menu-item flex align-items_center" @click="jump('ecology')">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/main1.png" />
			<view>联盟生态</view>
		</view>
		<view class="menu-item flex align-items_center" @click="jump('outside')">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/main2.png" />
			<view>数字产品中心</view>
		</view>
		<view class="menu-item flex align-items_center" @click="jump('connection')">
			<image mode="aspectFill" src="https://aph.junhecms.com/image/main3.png" />
			<view>联系我们</view>
		</view>
	</view>

	<view class="foot">
		<view class="foot-head flex space-between">
			<view class="foot-head-left relative">
				<image class="inherit" :src="baseUrl + newsList[0]?.image" mode="aspectFill" />
				<view class="title flex align-items_center space-between" @click="wxJump(0)">
					<text class="omit">{{ newsList[0]?.name }}</text>
					<image
						mode="aspectFill"
						class="shrink0"
						src="https://aph.junhecms.com/image/icon-right.png" />
				</view>
			</view>
			<view class="foot-head-right flex wrap align-content_space-between">
				<view class="relative">
					<image class="inherit" :src="baseUrl + newsList[1]?.image" mode="aspectFill" />
					<view class="title flex align-items_center space-between" @click="wxJump(1)">
						<text class="omit">
							{{ newsList[1]?.name }}
						</text>
						<image
							mode="aspectFill"
							class="shrink0"
							src="https://aph.junhecms.com/image/icon-right.png" />
					</view>
				</view>
				<view class="relative">
					<image class="inherit" :src="baseUrl + newsList[2]?.image" mode="aspectFill" />
					<view class="title flex align-items_center space-between" @click="wxJump(2)">
						<text class="omit">
							{{ newsList[2]?.name }}
						</text>
						<image
							mode="aspectFill"
							class="shrink0"
							src="https://aph.junhecms.com/image/icon-right.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="foot-bottom relative">
			<image class="inherit" :src="baseUrl + newsList[3]?.image" mode="aspectFill" />
			<view class="foot-bottom-title omit">{{ newsList[3]?.name }}</view>
			<view
				class="foot-bottom-detail flex align-items_center justify-content_center"
				@click="wxJump(3)">
				查看详情
				<image mode="aspectFill" src="https://aph.junhecms.com/image/icon-right.png" />
			</view>
		</view>
	</view>
	<footerTips></footerTips>
	<share :isCustom="true" />
	<tabbar :value="0" />
</template>

<script setup>
import { ref, reactive } from 'vue';
import { get, post } from '@/utils/collect.js';
import upper from '@/components/upper';
import footerTips from '@/components/footerTips/footerTips.vue';
import { baseUrl, pageJump } from '@/utils/tool.js';

uni.setStorageSync('navTitle', '普华永道');

// 轮播图跳转
const handleSwiper = (index) => {
	const item = swiperList.value[index];
	pageJump(item);
};

// 轮播图
const swiperList = ref([]);
const swiperParams = reactive({
	height: '400rpx'
});

// 中心模块
const jump = (router) => {
	let url;
	if (router === 'product') url = '/pages/product/index';
	else if (router === 'ecology') {
		uni.showToast({
			title: '暂未开放',
			icon: 'none',
			duration: 2000
		});
		// url = '/homePage/ecology/index';
	} else if (router === 'connection') url = '/pages/us/index';
	else if (router === 'outside') {
		url = '/homePage/outside/index?url=https://digitalstore.pwccn.com.cn/zh-cn/';
	}

	uni.navigateTo({
		url
	});
};

// 通知跳转
const handleNotice = (index) => {
	const item = noticeList.value[index];
	pageJump(item);
};
// 滚动通知
const noticeText = ref([]);
const noticeList = ref([]);

// 新闻
const wxJump = (index) => {
	uni.navigateTo({
		url: '/homePage/outside/index?url=' + newsList.value[index].url
	});
};
const newsList = ref([]);
const _news = () => {
	post('/index/news').then((res) => {
		newsList.value = res.data;
	});
};
_news();

// 首页数据
const _index = () => {
	post('/index/index').then((res) => {
		swiperList.value = res.data.ad.map((item) => {
			return {
				...item,
				url: baseUrl + item.image
			};
		});
		noticeList.value = res.data.notice;
		noticeText.value = res.data.notice.map((item) => item.title);
	});
};

_index();
</script>

<style scoped lang="scss">
.foot {
	width: 690rpx;
	margin: 12rpx auto 10rpx;
	padding-bottom: 20rpx;

	.title {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.5);
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 60rpx;
		padding: 0rpx 16rpx;
		box-sizing: border-box;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	&-head {
		&-left {
			width: 338rpx;
			height: 400rpx;
			margin-right: 14rpx;
		}

		&-right {
			view {
				width: 338rpx;
				height: 193rpx;
			}
		}
	}

	&-bottom {
		margin-top: 14rpx;
		width: 690rpx;
		height: 240rpx;

		&-detail {
			width: 172rpx;
			height: 57rpx;
			background: rgba(0, 0, 0, 0.5);
			font-weight: 500;
			font-size: 25rpx;
			color: #ffffff;
			line-height: 57rpx;
			position: absolute;
			left: 16rpx;
			bottom: 35rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		&-title {
			width: 650rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 38rpx;
			position: absolute;
			top: 61rpx;
			left: 21rpx;
		}
	}
}

.menu {
	margin-top: 23rpx - 7rpx;

	&-item {
		width: 338rpx;
		height: 100rpx;
		background: #ffffff;
		border: 1rpx solid #ededed;
		margin: 7rpx;

		image {
			width: 58rpx;
			height: 58rpx;
			margin-left: 20rpx;
		}

		view {
			font-weight: 500;
			font-size: 24rpx;
			color: #2d2d2d;
			margin-left: 20rpx;
		}
	}
}

.notice {
	$wh: 44rpx;
	$mg: 12rpx;
	height: 88rpx;
	background: var(--mainColor);
	padding: 0px $mg;

	&-msg,
	&-right {
		width: $wh;
		height: $wh;
		position: relative;
	}

	&-msg {
		left: $mg;
	}

	&-right {
		right: $mg;
	}
}
</style>
